<template>
  <view class="app">
    <!-- 内容区域 -->
    <view class="contentArea">
      <!-- table表格 -->
      <view class="table">
        <!-- Table表头 -->
        <view class="tableHead">
          <view class="tableHeadName">危险源名称</view>
          <view class="tableHeadName">风险点</view>
          <view class="tableHeadName">风险等级</view>
          <view class="tableHeadName">风险类型</view>
          <view class="tableHeadName">危险源详情</view>
          <view class="tableHeadName" style="flex-grow: 6">详情</view>
        </view>

        <scroll-view
          scroll-y
          style="height: 88vh"
          @scrolltolower="leaveTheUpdateData"
        >
          <!-- Table内容 -->
          <view v-if="tableData && tableData.length > 0">
            <view class="tableContent" v-for="item in tableData" :key="item.id">
              <view class="tableContentValue">
                {{ item.operation_steps || "" }}
              </view>
              <view class="tableContentValue">
                {{ item.risk_point || "" }}
              </view>
              
              <view class="tableContentValue">
                {{ item.risk_level || "" }}
              </view>
              <view class="tableContentValue">
                {{ item.risk_type || "" }}
              </view>
              <view class="tableContentValue">
                {{ item.hazard_event || "" }}
              </view>
              <view class="tableContentValue operationCharacterStyle">
                <view
                  style="width: 100%; text-align: center"
                  @click="measuresDetails(item)">
                  <span>措施详情</span>
                </view>
                <view
                  style="width: 100%; text-align: center"
                  @click="plantDetails(item)">
                  <span>排查计划</span>
                </view>
                <view
                  style="width: 100%; text-align: center"
                  @click="measuresDetails1(item)">
                  <span>排查记录</span>
                </view>
            </view>
              <!-- <view
                  class="tableContentValue operationCharacterStyle"
                  style="width: 100%; text-align: center"
                  @click="measuresDetails(item)"
                  >措施详情</view
                >-->
            </view> 
          </view>
          <!-- 暂无数据 -->
          <view
            v-else
            class="empty-block"
            style="transform: translateY(15%); height: 87vh">
            <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
          </view>
        </scroll-view>
      </view>
      <!-- /table表格 -->
    </view>
    <!-- /内容区域 -->
  </view>
</template>

<script>
/**
 * 引入API
 * newgetDangerSourceList: 获取危险源列表
 */
import { newgetDangerSourceList } from "@/apis/risk/index.js";
import { initParamsEvent } from "@/apis/pageNewrisk/index.js";

export default {
  /**
   * 定义数据
   */
  data() {
    return {
      /* Table 循环渲染数据 */
      tableData: null,
      /* 请求附带的值 */
      params: {
        pageNo: 1,
        pageSize: 20,
        riskTypeId: undefined,
      },
      riskTypeId: "",
    };
  },

  /**
   * 方法定义
   */
  methods: {
    //#region API 接口封装
    /* 获取危险源列表 */
    async newgetDangerSourceList() {
      this.params.riskTypeId = this.riskTypeId;
      const res = await newgetDangerSourceList(this.params);
      if (this.tableData) {
        this.tableData = [...this.tableData, ...res.list];
      } else {
        this.tableData = res.list;
      }
    },
    //#endregion
    /* 详情点击事件 */
    measuresDetails1(rowData) {
      uni.navigateTo({
        url: `/riskPointManagement/detailPage/measuresDetails/inspectionRecord/index?hazardId=${rowData.hazard_id}`,
      });
    },
    plantDetails(rowData) {
      console.log(rowData)
      uni.navigateTo({
        url: `/riskPointManagement/detailPage/measuresDetails/managePlan/index?hazardId=${rowData.hazard_id}`,
      });
    },
    /* 措施详情事件 */
    measuresDetails(rowData) {
      initParamsEvent((paramKey) => {
        uni.$emit(paramKey, {
          rowData,
        });
      }, "MeasuresEvent");
      uni.navigateTo({
        url: `/riskPointManagement/detailPage/measuresDetails/index?hazardSourceId=${rowData.id}`,
      });
    },

    /* 触底更新数据 */
    leaveTheUpdateData() {
      this.params.pageNo = this.params.pageNo + 1;
      this.newgetDangerSourceList();
    },
  },

  /**
   * 接受路由传参
   * @param {*} options
   */
  onLoad(options) {
    this.params.riskTypeId = options.id;
    this.riskTypeId = options.id;
    this.newgetDangerSourceList();
  },
  /**
   * Vue 创建钩子
   */
  created() {},
};
</script>

<style lang="scss" scoped>
/* 内容区域样式 */
.contentArea {
  background-color: #fff;
  padding: 33rpx 8rpx 8rpx 8rpx;
  border-radius: 10rpx;

  /* table表样式 */
  .table {
    /* 表头样式 */
    .tableHead {
      display: flex;
      align-items: center;
      justify-content: center;

      /* 表头item */
      .tableHeadName {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 78rpx;
        // padding: 0 13rpx;
        flex: 5;
        font-size: 24rpx;
        font-weight: 600;
        color: #ffffff;
        background-color: #81aef4;
      }
    }

    /* table内容区域样式 */
    .tableContent {
      display: flex;
      border-bottom: 1px solid #dad9d9;
      /* 内容值 */
      .tableContentValue {
        background-color: #fff;
        font-size: 22rpx;
        font-weight: 400;
        min-height: 78rpx;
        color: #666;

        display: flex;
        justify-content: center;
        align-items: center;
        flex: 5;
        flex-wrap: wrap;
      }
      /* 操作按钮样式 */
      .operationCharacterStyle {
        font-size: 24rpx;
        font-weight: 400;
        color: #157ffb;
      }
    }
  }
}
</style>